<template>
    <div>
        <a-menu style="width: 120px;height: 100vh;background-color: #3975c6;" mode="vertical" @click="handleClick">
            <a-icon type="logo" style="font-size: 24px; color: #fff;"></a-icon>
            <a-menu-item key="1">
                <icon-font type="icon-shouye-m" />
                <span>主页</span>
            </a-menu-item>
            <a-menu-item key="2">
                <icon-font type="icon-shujuzhongxin-m" />
                <span>看板</span>
            </a-menu-item>
        </a-menu>
    </div>
</template>
<script>
    import { Icon } from 'ant-design-vue';

    const IconFont = Icon.createFromIconfontCN({
        scriptUrl: '//at.alicdn.com/t/c/font_4063166_g2lqds5t1tv.js',
    });
    export default {
        name: 'NavView',
        components: {
            IconFont,
        },
        methods: {
            handleClick(e) {
                console.log(e)
                let key = e.key
                switch (key) {
                    case '1':
                        // 跳转到首页
                        this.$router.push('/');
                        break;
                    case '2':
                        // 跳转到关于我们页面
                        this.$router.push('/about');
                        break;
                    default:
                        break;
                }
            }
        }
    };
</script>
<style>
    .ant-menu {
        padding: 10px !important;
    }

    .anticon-logo {
        background-image: url('../assets/logo.png');
        background-size: contain;
        width: 80px;
        height: 80px;
    }

    .ant-menu-item {
        height: 60px !important;
        padding-top: 8px !important;
        padding-bottom: 7.5px !important;
        /* line-height: 45px !important; */
        color: gray;
        border-radius: 10px;
        display: flex !important;
        flex-direction: column !important;
        /* justify-content: center; */
        align-items: center;
    }

    .ant-menu-item .anticon {
        color: #b3cae9;
        font-size: 20px !important;
        margin: 0 !important;
        margin-right: 0 !important;
        line-height: 20px;
    }

    .ant-menu-item span {
        color: #b3cae9;
        font-size: 5px !important;
        margin: 0 !important;
        line-height: 25px;
    }

    .ant-menu-item-selected,
    .ant-menu-item-active {
        background-color: rgba(255, 255, 255, 0.305) !important;
    }

    .ant-menu-item-selected .anticon,
    .ant-menu-item-active .anticon,
    .ant-menu-item-selected span {
        color: white !important;
    }

    .ant-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.07) !important;
    }

    .ant-menu-item:hover .anticon,
    ant-menu-item:hover span {
        color: #ffffffaf !important;
    }
</style>